import React, { useState, useEffect } from 'react';
import styles from './index.less';
import { connect } from 'dva';
import Profile from './components/Profile';
import { Col, Row } from "antd";
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
import TagsCard from "@/pages/customer/information/components/TagsCard";
import NoInviteCard from "@/pages/customer/information/components/NoInviteCard";
import NoAttractionCard from "@/pages/customer/information/components/NoAttractionCard";
import VoucherBalance from "@/pages/customer/information/components/VoucherBalance";
import { CustomerInformationState } from "@/pages/customer/information/data";
import SearchBar from '@/pages/customer/information/components/SearchBar';
import GofunCard from "@/pages/customer/information/components/GofunCard";
import CustSalesCard from "@/pages/customer/information/components/CustSalesCard";
import EligibilityList from "@/pages/customer/information/components/EligibilityList";
import PreferenceCard from "@/pages/customer/information/components/PreferenceCard";
import HorzDragBanner from '@/pages/customer/information/components/HorzDragBanner';

export interface InformationProps {
  [propName: string]: any;
}

const mapStateToProps = (state: CustomerInformationState) => ({
  customerInfo: state['customerInformation'].customerInfo
});

const reorder = (list, startIndex, endIndex) => {
  console.log(list, startIndex, endIndex);
  const result = Array.from(list);
  const [removed] = result.splice(startIndex, 1);
  result.splice(endIndex, 0, removed);
  return result;
};

const getVerticalListStyle = isDraggingOver => ({
  background: isDraggingOver ? 'lightblue' : null,
  padding: 0,
});

const Information: React.FC<InformationProps> = (props) => {

  const customerItems = [
    {
      id: `item-1`,
      content: `item 1`,
      module: <Profile customerInfo={props.customerInfo} />
    }, {
      id: `item-2`,
      content: `item 1`,
      module: <TagsCard />
    }, {
      id: `item-3`,
      content: `item 1`,
      module: <PreferenceCard />
    }
  ]

  const [tempItems, setTempItems] = useState(customerItems);

  useEffect(() => {
    console.log("tempItems", tempItems);
    setTempItems(customerItems);
  }, [props.customerInfo])

  const onDragEnd = result => {
    // dropped outside the list
    if (!result.destination) {
      return;
    }

    const items = reorder(
      tempItems,
      result.source.index,
      result.destination.index,
    );

    console.log(items);
    setTempItems(items);
  }

  return (
    <div>
      <SearchBar />
      <div className={styles.customerBox}>
        <Row type="flex" justify="space-around">
          <Col xs={24} sm={24} md={24} lg={6} xl={6}>
            <Row type="flex">
              <DragDropContext onDragEnd={onDragEnd}>
                <Droppable droppableId="droppable">
                  {(provided, snapshot) => (
                    <div
                      {...provided.droppableProps}
                      ref={provided.innerRef}
                      style={getVerticalListStyle(snapshot.isDraggingOver)}
                    >
                      {tempItems.map((item, index) => (
                        <Draggable key={item.id} draggableId={item.id} index={index}>
                          {(subProvided, subSnapshot) => (
                            <div
                              ref={subProvided.innerRef}
                              {...subProvided.draggableProps}
                              {...subProvided.dragHandleProps}
                            >
                              {item.module}
                            </div>
                          )}
                        </Draggable>
                      ))}
                      {provided.placeholder}
                    </div>
                  )}
                </Droppable>
              </DragDropContext>
            </Row>
          </Col>
          <Col xs={24} sm={24} md={24} lg={18} xl={18}>
            <Row type="flex">
              {/* <HorzDragBanner /> */}
              <Col xs={24} sm={24} md={24} lg={8} xl={8}>
                <GofunCard />
              </Col>
              <Col xs={24} sm={24} md={24} lg={8} xl={8}>
                <NoInviteCard />
              </Col>
              <Col xs={24} sm={24} md={24} lg={8} xl={8}>
                <NoAttractionCard />
              </Col>
              <Col span={24}><VoucherBalance /></Col>
              <Col span={24}>
                <CustSalesCard />
              </Col>
              <Col span={24}>
                <EligibilityList customerView={{}} />
              </Col>
            </Row>
          </Col>
        </Row>

      </div>
    </div>
  );
};

export default connect(mapStateToProps)(Information);
